<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <p>{{ state.count }}</p>
      <p>{{ state.obj }}</p>
    </div>
    <button @click="stateChange">数值增加</button>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const state = reactive({
  count: 0,
  obj: {
    arr: ["foo", "bar",'dhd'],
  },
});

function stateChange() {
  // 以下都会按照期望工作
  state.count++;
}
</script>
<style>
@media (min-width: 2024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
